h1 {
  padding: 2rem;
  text-align: center;
  color: grey;
}

table {
  width: 100%;
  table-layout: fixed;

  td {
      padding: 2px;
      word-break: break-all;
      color: #505050;

      strong {
          text-transform: uppercase;
          font-size: 11px;
          letter-spacing: 1px;
          color: rgb(85, 85, 85);
      }
  }
}
.squares-cont {
  display: flex;
 
}
.ag-chart-base {
  // position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

.panel {
  .panel-heading {
      margin: 1rem;
      padding: 3px;
      border-radius: 6px;

      .call-id {
          font-size: 16px;
          text-align: center;
          padding: 0.5px;
          background: #fff;
      }

      .table-wrapper {
          padding: 1rem 2rem;
          background: #fff;
          font-size: 14px;
          border-top: 1px solid rgba(0, 0, 0, 0.2);
      }

      .rtp-agent-report {
          padding: 0.5rem 1.75rem;
          padding-top: 0.75rem;
          margin: 3px;
          // background: #dcf7dc;
          border-radius: 3px;

          table {
              //  background: #dcf7dc;

              tr {
                  font-size: 12px;
              }
          }
      }
  }
}

.task-wrapper {
  flex: 1;
  background-color: white;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));

  table .call-info-data {
      font-size: 12px;
      td {
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 1px;
      }
  }

  .task-item {
      flex: 1;
      margin: 1px;
      padding: 5px;
      padding-left: 10px;
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      background-color: #dcf7dc;
      font-size: 12px;
      border-radius: 3px;
      color: rgb(77, 77, 77);

      span {
          font-size: 12px;
          font-weight: bold;
      }
  }
}
.trans-chart {
  display: flex;
  justify-content: center;
}
.chart-cont {
  height: 80px;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.__chart {
  grid-row: 2 / -1;
}

.__uac {
  color: white;
  padding: 6px;
  padding-left: 0px;
  font-size: 14px;
  color: rgb(55, 55, 55);
  border-bottom: 1px solid lightgrey;
  margin-bottom: 12px;
}

.rtp-head {
  font-weight: bold;
  color: grey !important;
  font-size: 11px;
}

.rtp-data {
  font-size: 16px !important;
}

.big {
  font-weight: bold;
  font-size: 28px;
  color: grey !important;
}

.toggle-header {
  cursor: pointer;
  padding: 6px;
  font-size: 14px;
  padding-bottom: 6px;
  padding-right: 12px;
  display: flex;
  justify-content: space-between;
}

.toggle-header:hover {
  background: #eeeeee;
}

.call-header-item {
  padding: 3px 5px;
}

.header-data-items {
  display: flex;
  width: 375px;
  justify-content: space-between;
  padding-top: 3px;
}

.call-data-panel {
  background: #fff;
  font-size: 14px;
}

ngx-json-viewer {
  font-size: 12px;
}

.mos-header {
  padding-right: 6px;
  border-radius: 3px;
}
.packet-stats {
  display: flex;
  font-size: 14px;
}
.packet-stats div {
  text-transform: uppercase;
  color: rgb(90, 90, 90);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  & strong {
      color: #505050;
      font-size: 14px;
  }
}
.codec-data {
  border-top: 1px solid lightgray;
  display: flex;
  justify-content: space-between;
  & p {
      margin: 0;
      padding: 0;
      margin-top: 6px;
  }
}

.data-header {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  margin-top: 10px;
}